<template>  
  <view class="container">
    <view class="title" v-if="collectList.length > 0">我的收藏</view>
    <view class="collect-list" v-if="collectList.length > 0">
      <ConsultList :consultList="collectList" />
      <u-loadmore :status="uploadMoreStatus" />
    </view>
    <view class="empty-notice" v-else>
      <u-empty
        mode="data"
        icon="/static/images/data_empty.png"
        marginTop="80"
        text="你还没有收藏记录哦"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import ConsultList from '@/components/consult-list/consult-list';
import * as api from '@/api/api';
export default {
  name: "mine_collect",
  components: {
    ConsultList
  },
  data() {
    return {
      collectList: [], // 收藏列表
      currentPage: 1,
      limit: 8,
      uploadMoreStatus: 'loadmore',
      isLastPage: false
    };
  },
  onLoad() {
    this.getCollectList();
  },
  onShow() {
    this.isLastPage = false;
    this.uploadMoreStatus = 'loadmore';
    this.getCollectList();
  },
  onHide() {
    this.currentPage = 1;
  },
  created() {},
  mounted() {},
  methods: {
    async getCollectList() {
      const {data: res} = await api.getCollectList({
        page: this.currentPage,
        limit: this.limit
      });
      if (res.code === 1) {
        if (res.data.length < 8) {
          this.isLastPage = true;
          this.uploadMoreStatus = 'nomore';
        }
        let list = [];
        res.data.forEach(item => {
          list.push(item.in_video);
        })
        if (this.currentPage > 1) {
          this.collectList = this.collectList.concat(list);
        } else {
          this.collectList = list;
        }
      }
    }
  },
  onReachBottom() {
    if (!this.isLastPage && this.collectList.length) {
      this.uploadMoreStatus = 'loading';
      this.currentPage += 1;
      this.getCollectList();
    }
  }
};
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      width: 690rpx;
      font-size: 30rpx;
      color: #000;
      padding-top: 20rpx;
    }
    .collect-list {
      width: 690rpx;
      margin-top: 30rpx;
    }
    .empty-notice {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      /deep/ .u-empty {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
</style>
